<template>
  <div class="menu-wrapper">
    <el-card class="box-card">
      <div ref="memberForm">
        <div style="width: 100%;display: flex; justify-content: space-between; align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>

        </div>
        <el-row :gutter="24" class="deleted_OrderContent">
          <el-col :span="8">
            <span class="deleted_Row_Headings">客户名称：</span>
            <span class="deleted_OrderTitle">{{ form.name }}</span>
          </el-col>
          <el-col :span="8">
            <span class="deleted_Row_Headings">注册手机：</span>
            <span class="deleted_OrderTitle">{{ form.mobile }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="deleted_OrderContent">
          <el-col :span="8">
            <span class="deleted_Row_Headings">所属门店：</span>
            <span class="deleted_OrderTitle" style="margin-right: 20px">{{shopName}}</span>
            <el-button  type="primary" size="mini"  v-permission="['member.edit']" @click="transferShow">过户</el-button>
          </el-col>

        </el-row>
        <el-row :gutter="24" class="deleted_OrderContent">
          <el-col :span="8">
            <span class="deleted_Row_Headings">客户等级：</span>
            <span class="deleted_OrderTitle">{{ form.vipName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="deleted_Row_Headings">客户分类：</span>
            <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{ form.memberCategoryName }}</span>
          </el-col>
        </el-row>

        <el-tabs v-model="activeName" style="margin-top: 20px;" @tab-click="tabsClick">

          <el-tab-pane label="其他资料" name="otherInfo">
            <el-row :gutter="24" class="deleted_OrderContent">
              <el-col :span="8">
                <span class="deleted_Row_Headings">客户类型：</span>
                <span v-if="form.memberType==0" class="deleted_OrderTitle">个人</span>
                <span v-if="form.memberType==1" class="deleted_OrderTitle">企业</span>
              </el-col>
              <el-col :span="8">
                <span class="deleted_Row_Headings">客户性别：</span>
                <span v-if="form.gender==0" class="deleted_OrderTitle">男</span>
                <span v-if="form.gender==1" class="deleted_OrderTitle">女</span>
                <span v-if="form.gender==2" class="deleted_OrderTitle">隐藏</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="deleted_OrderContent">
              <el-col :span="8">
                <span class="deleted_Row_Headings">备用电话：</span>
                <span class="deleted_OrderTitle">{{ form.phone }}</span>
              </el-col>
              <el-col :span="8">
                <span class="deleted_Row_Headings">所在地：</span>
                <span class="deleted_OrderTitle">{{ form.areaName }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="deleted_OrderContent">
              <el-col :span="8">
                <span class="deleted_Row_Headings">所属企业：</span>
                <span class="deleted_OrderTitle">{{ form.companyName }}</span>
              </el-col>
              <el-col :span="8">
                <span class="deleted_Row_Headings">邮箱：</span>
                <span class="deleted_OrderTitle">{{ form.email }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="deleted_OrderContent">
              <el-col :span="8">
                <span class="deleted_Row_Headings">所属部门：</span>
                <span class="deleted_OrderTitle">{{ form.officeName }}</span>
              </el-col>
              <el-col :span="8">
                <span class="deleted_Row_Headings">推荐人：</span>
                <span class="deleted_OrderTitle">{{ promoterName }}</span>
              </el-col>
            </el-row>

          </el-tab-pane>

          <el-tab-pane label="收货地址" name="receiver">
            <div style="display: flex; justify-content: flex-end; margin-bottom: 10px; width: 100%;">
              <el-button type="primary" @click="showAddReceiver">新增</el-button>
            </div>
            <el-table v-loadMore="[payLoads,'receiver-list']" :data="receiverList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="收货人" align="left" prop="consignee" width="100" />
              <el-table-column label="联系电话" align="left" prop="phone" width="110" />
              <el-table-column label="详细地址" align="left" prop="address" />
              <el-table-column label="操作" align="center" fixed="right" width="80">
                <template slot-scope="scope">
                  <a @click="showEditReceiver(scope.row)">
                    <i style="color: #409EFF" class="el-icon-edit" />
                  </a>
                  <a style="margin-left: 10px" @click="delAddress(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete" />
                  </a>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="金币账单" name="point">
            <div v-if="pointList == 0" style="justify-content: center;display: flex">
               <span style="text-align: center;font-size: 16px;color:#888888;width: 100%">暂无数据</span>
            </div>
            <div v-for="item in pointList" v-else>
              <div class="deleted_OrderHeader">
                <el-row :gutter="24">
                  <el-col :span="1">
                    <span style="padding-left: 20px;">├</span>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ item.createDate | datetimeFormatter }}</span>
                  </el-col>
                  <el-col :span="13">
                    <span>{{ item.memo }}</span>
                  </el-col>
                  <el-col v-if="item.credit" :span="3">
                    <span>收入 : {{ item.credit }}</span>
                  </el-col>
                  <el-col v-else :span="3">
                    <span style="color: red;">支出 : {{ item.debit }}</span>
                  </el-col>
                  <el-col :span="3">
                    <span>余额 : {{ item.balance }}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="积分账单" name="matchPoint">
            <div v-for="item in matchPointForm" v-if="matchPointForm > 0">
              <div class="deleted_OrderHeader">
                <el-row :gutter="24">
                  <el-col :span="1">
                    <span style="padding-left: 20px;">├</span>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ item.createDate | datetimeFormatter }}</span>
                  </el-col>
                  <el-col :span="13">
                    <span>{{ item.memo }}</span>
                  </el-col>
                  <el-col v-if="item.credit" :span="3">
                    <span>收入 : {{ item.credit }}</span>
                  </el-col>
                  <el-col v-else :span="3">
                    <span style="color: red;">支出 : {{ item.debit }}</span>
                  </el-col>
                  <el-col :span="3">
                    <span>余额 : {{ item.balance }}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div v-if="matchPointForm == 0" style="justify-content: center;display: flex">
               <span style="text-align: center;font-size: 16px;color:#888888;width: 100%">暂无数据</span>
            </div>
          </el-tab-pane>

          <el-tab-pane v-if="couponShow" label="优惠券" name="coupon">
            <el-table :data="couponList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="创建时间" align="left" width="170">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.createDate | datetimeFormatter }}</span>
                </template>
              </el-table-column>
              <el-table-column label="名称" align="left" prop="name" min-width="250" />
              <el-table-column label="类型" align="left">
                <template slot-scope="scope">
                  {{ scope.row.type | watchType }}
                </template>
              </el-table-column>
              <el-table-column label="适用范围" align="right" prop="stock" width="80">
                <template slot-scope="scope">
                  {{ scope.row.scope | watchScope }}
                </template>
              </el-table-column>
              <el-table-column label="开始时间" align="center" width="170">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.beginDate | datetimeFormatter }}</span>
                </template>
              </el-table-column>
              <el-table-column label="结束时间" align="center" width="170">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.endDate | datetimeFormatter }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="waterShow" label="电子水票" name="water">
            <el-table :data="waterList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="缩略图" align="left" prop="thumbnail" width="80">
                <template slot-scope="scope">
                  <img :src="scope.row.thumbnail" style="width: 50px; vertical-align:middle; overflow: hidden;">
                </template>
              </el-table-column>
              <el-table-column label="水票名称" align="left" prop="name" />
              <el-table-column label="可用张数" align="right" prop="stock" width="100" />
              <el-table-column label="价格" align="right" prop="price" width="100" />
              <el-table-column label="说明" align="center">
                <template>
                  <div class="coupon-couponList-port2-text3">有限期永久有效</div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="emptyBarrelShow" label="空桶记录" name="emptyBarrel">
            <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
              <p>当前余桶: {{ emptyBarrelNum }}</p>
              <div>
                <el-button type="primary" @click="outDepositShow">欠桶登记</el-button>
                <el-button type="primary" @click="returnDepositShow">存桶登记</el-button>
              </div>
            </div>
            <el-table :data="emptyBarrelList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="缩略图" align="left" prop="thumbnail" width="80">
                <template slot-scope="scope">
                  <img :src="scope.row.thumbnail" style="width: 50px; vertical-align:middle; overflow: hidden;">
                </template>
              </el-table-column>
              <el-table-column label="日期" align="left" width="150">
                <template slot-scope="scope">
                  {{ scope.row.createDate | dateFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="空桶名称" align="left" prop="name" />
              <el-table-column label="单位" align="left" prop="unit" width="100" />
              <el-table-column label="数量" align="right" prop="quantity" width="100">
                <template slot-scope="scope">
                  <span :style="{'color': scope.row.quantity >= 0? '': 'red' }">{{ scope.row.quantity }}</span>
                </template>
              </el-table-column>
              <el-table-column label="说明" align="center" prop="memo" />
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="emptyBarrelShow" label="押桶记录" name="deposit">
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div style="display: flex; margin-bottom: 15px;">
                <p>当前押金: {{ price }}</p>
                <p style="margin-left: 10px;">当前押桶: {{ stock }}</p>
              </div>
              <div style="display: flex">
                <el-button type="primary" @click="memberAddClick">押桶</el-button>
                <el-button type="primary" @click="memberReturnClick">退桶</el-button>
              </div>
            </div>

            <el-table :data="depositList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="缩略图" align="left" prop="thumbnail" width="80">
                <template slot-scope="scope">
                  <img :src="scope.row.thumbnail" style="width: 50px; vertical-align:middle; overflow: hidden;">
                </template>
              </el-table-column>
              <el-table-column label="日期" align="left" width="150">
                <template slot-scope="scope">
                  {{ scope.row.createDate | dateFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="空桶名称" align="left" prop="name" />
              <el-table-column label="数量" align="right" prop="stock" width="100" />
              <el-table-column label="押金" align="right" prop="price" width="100" />
              <el-table-column label="说明" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.totalInStock!=scope.row.totalOutStock">未退桶</div>
                  <div v-else>已退桶</div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="shoppingShow" label="消费记录" name="shopping">
            <el-table :data="shoppingList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="缩略图" align="left" prop="thumbnail" width="80">
                <template slot-scope="scope">
                  <img :src="scope.row.itemList[0].thumbnail" style="width: 50px; vertical-align:middle; overflow: hidden;">
                </template>
              </el-table-column>
              <el-table-column label="销售日期" align="left" prop="dateFormatter" width="110">
                <template slot-scope="scope">
                  {{ scope.row.createDate | dateFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="商品名称" align="left">
                <template slot-scope="scope">
                  {{ scope.row.itemList[0].name }}
                </template>
              </el-table-column>
              <el-table-column label="应付金额" align="right" prop="amountPayable" width="80" />
              <el-table-column label="店铺优惠" align="right" prop="discount" width="80" />
              <el-table-column label="运费金额" align="right" prop="freight" width="80" />
              <el-table-column label="实付金额" align="right" prop="amountPaid" width="80" />
              <el-table-column label="订单状态" align="left" width="80">
                <template slot-scope="scope">
                  {{ scope.row.statusDescr }}
                </template>
              </el-table-column>
              <el-table-column label="查看详情" align="center" width="80">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="toOrder(scope.row)">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="paymentShow" label="付款记录" name="payment">
            <el-table :data="paymentList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="创建日期" align="left" prop="dateFormatter" width="110">
                <template slot-scope="scope">
                  {{ scope.row.createDate | dateFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="摘要" align="left" prop="memo" />
              <el-table-column label="购买人" align="left" prop="name" width="110" />
              <el-table-column label="联系方式" align="center" prop="mobile" width="110" />
              <el-table-column label="付款状态" align="left" width="80">
                <template slot-scope="scope">
                  {{ scope.row.status | watchStatus }}
                </template>
              </el-table-column>
              <el-table-column label="金额" align="right" prop="amount" width="80" />
              <el-table-column label="收款时间" align="left" width="160">
                <template slot-scope="scope">
                  {{ scope.row.paymentDate | datetimeFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="查看详情" align="center" width="80">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="toPayment(scope.row)">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="refundShow" label="退款记录" name="refunds">
            <el-table :data="refundList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="创建日期" align="left" prop="dateFormatter" width="110">
                <template slot-scope="scope">
                  {{ scope.row.createDate | dateFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="摘要" align="left" prop="memo" />
              <el-table-column label="购买人" align="left" prop="name" width="110" />
              <el-table-column label="联系方式" align="center" prop="mobile" width="110" />
              <el-table-column label="付款状态" align="left" width="80">
                <template slot-scope="scope">
                  {{ scope.row.status | watchStatus }}
                </template>
              </el-table-column>
              <el-table-column label="金额" align="right" prop="amount" width="80" />
              <el-table-column label="退款时间" align="left" width="160">
                <template slot-scope="scope">
                  {{ scope.row.expire | datetimeFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="查看详情" align="center" width="80">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="toRefund(scope.row)">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="rechargeShow" label="会员卡账单" name="memberCard">
            <el-table :data="cardBillList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="创建日期" align="left" prop="dateFormatter" width="110">
                <template slot-scope="scope">
                  {{ scope.row.createDate | dateFormatter }}
                </template>
              </el-table-column>
              <el-table-column label="摘要" align="left" prop="memo" />
              <el-table-column label="余额" align="left" prop="balance" width="110" />
              <el-table-column label="收入" align="center" prop="credit" width="110" />
              <el-table-column label="支出" align="left" prop="debit" width="110" />
            </el-table>
          </el-tab-pane>

          <el-tab-pane v-if="rechargeShow" label="福利卡类表" name="welfare">
            <el-table :data="welfareList" border stripe style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column label="创建时间" align="left" width="170">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.createDate | datetimeFormatter }}</span>
                </template>
              </el-table-column>
              <el-table-column label="公司名称" align="left" prop="companyName" min-width="200" />
              <el-table-column label="卡号" align="left" prop="code" min-width="200" />
              <el-table-column label="摘要" align="left" prop="memo" min-width="200" />
              <el-table-column label="结束时间" align="center" width="170">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.endDate | datetimeFormatter }}</span>
                </template>
              </el-table-column>
              <el-table-column label="查看账单" align="center" width="160">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="toWelfareClick(scope.row)">
                    查看账单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-pagination
            v-if="paginationShow"
            style="padding-top: 15px;"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />

        </el-tabs>
      </div>
    </el-card>
    <el-dialog :title="bomTile" width="650px" :visible.sync="returnVisible">

      <div class="el-dialog-div">
        <el-table :data="products" border>
          <el-table-column label="商品名称">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column label="商品图片" width="80" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 30px; height: 30px;">
            </template>
          </el-table-column>
          <el-table-column label="商品价格"  width="80">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                <span>{{ scope.row.price }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="数量">
            <template slot-scope="{row}">
              <el-input v-model="row.quality"/>
            </template>
          </el-table-column>
        </el-table>

        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 15px">
          <el-select  clearable placeholder="请选择收款方式"
                      filterable style="width: 160px;margin-bottom: 10px" v-model="paymentPluginId">
            <el-option v-for="item in payments" :key="item.id" :label="item.name" :value="item.paymentPluginId" />
          </el-select>
          <el-button type="primary" size="mini"  @click="selectBom">{{bomTile}}</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :title="`${emptyBarrelTitle}登记`" :visible.sync="emptyBarrelDialogVisible" width="500px" @close="depositClose">
      <el-form ref="emptyBarrelRef" :rules="emptyBarrelRules" :model="emptyBarrelForm" label-width="80px">
        <el-form-item label="商品名称" prop="name">
          <search-options v-if="emptyBarrelSearch" :tips-text="'请选择商品名称'" :options-style="'width: 80%'" :request="'product'" :fixed-params="productParams" @getAllData="queryProduct" />
        </el-form-item>
        <el-form-item :label="`${emptyBarrelTitle}数量`" prop="quantity">
          <el-input v-model="emptyBarrelForm.quantity" style="width: 80%" type="Number" clearable />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="emptyBarrelForm.memo" style="width: 80%" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="emptyBarrelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="emptyBarrelClick('emptyBarrelRef')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-if="receiverAddShow" title="新增地址" :visible.sync="receiverAddVisible" width="950px" append-to-body :before-close="receiverAddClose">
      <div style="position: relative;height: 60vh;overflow: auto">
        <receiverAdd path-type="0" :member-id="id" @orderReceiver="receivedAddReceiver" />
      </div>
    </el-dialog>

    <el-dialog v-if="receiverEditShow" title="修改地址" :visible.sync="receiverEditVisible" width="950px" append-to-body :before-close="receiverEditClose">
      <div style="position: relative;height: 60vh;overflow: auto">
        <receiverEdit :id="receivedId" path-type="0" :member-id="id" @orderReceiver="receivedEditReceiver" />
      </div>
    </el-dialog>

    <el-dialog title="过户" :visible.sync="transferVisible" width="500px" append-to-body :before-close="transferClose">
      <el-form ref="transferRef" :rules="transferRules" :model="transferForm" label-width="80px">
        <el-form-item label="商户名称" prop="mchId">
          <el-select v-model="transferForm.mchId" style="width: 100%;" placeholder="请选择商户名称" filterable :filter-method="queryMchId" clearable>
            <el-option v-for="item in mchIdOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <div style="display: flex; justify-content: flex-end;">
          <el-button @click="transferClose">取消</el-button>
          <el-button type="primary" :disabled="mchidClicked" @click="transferClick('transferRef')">确认</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>
<style scoped lang="scss">
  .menu-wrapper {
    margin: 15px;
  }
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }
  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .deleted_Row_Headings {
    color: #666666;
  }
  .deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
  }
</style>
<script>
import loadMore from '@/utils/loadMore.js'
import permission from '@/directive/permission/index.js' // 权限判断指令
import utils from '../../utils/utils.js'
import searchOptions from '@/components/searchOptions'
import { getMenuTree as MenuTree } from '@/api/sysMch'
import { find, point, receiver, transfer } from '@/api/member'
import { list as sysMchList } from '@/api/sysMch'
import { del as receiverDel } from '@/api/receiver'
import { addEmptyBarrel, decEmptyBarrel, emptyBarrel, summary } from '@/api/emptyBarrel'
import { list as virtualStock } from '@/api/virtualStock.js'
import {add,dec} from '@/api/virtualProduct'
import { list as shopping } from '@/api/order'
import { list as coupon } from '@/api/couponCode'
import { list as payment } from '@/api/payment'
import { list as refund } from '@/api/refunds'
import { list as card } from '@/api/card'
import { cardBillList as cardbill } from '@/api/cardBill'
import receiverAdd from '@/views/receiver/add'
import receiverEdit from '@/views/receiver/edit'
import {list as matchPointList} from '@/api/matchPoint'
import { list } from '@/api/product'
export default {
  name: 'member-edit',
  directives: { permission, loadMore },
  components: { searchOptions, receiverAdd, receiverEdit },
  filters: {
    watchScope(val) {
      if (val == 0) {
        return '全场'
      } else if (val == 1) {
        return '店内'
      } else if (val == 2) {
        return '商城'
      }
    },
    watchType(val) {
      if (val == 0) {
        return '满减'
      } else if (val == 1) {
        return '满折'
      } else if (val == 2) {
        return '满赠'
      } else if (val == 3) {
        return '兑换券'
      }
    },
    orderFormatter(val) {
      if (val == 0) {
        return '未确认'
      } else if (val == 1) {
        return '已确认'
      } else if (val == 2) {
        return '已完成'
      } else if (val == 3) {
        return '已取消'
      } else if (val == 4) {
        return '已评价'
      }
    },
    shippingFormatter(val) {
      if (val == 0) {
        return '未发货'
      } else if (val == 1) {
        return '已发货'
      } else if (val == 2) {
        return '待退货'
      } else if (val == 3) {
        return '已退货'
      }
    },
    watchStatus(val) {
      if (val == 0) {
        return '等待支付'
      } else if (val == 1) {
        return '支付成功'
      } else if (val == 2) {
        return '超时关闭'
      } else if (val == 3) {
        return '支付失败'
      }
    }
  },
  data() {
    return {
      transferVisible: false,
      transferForm: {},
      mchIdOptions: [],
      mchidClicked: false,
      isType:'',
      shopName:'无',
      mchIdMark: false,
      returnVisible:false,
      products:[],
      emptyBarrelNum: 0,
      price: 0,
      stock: 0,
      id: '',
      bomTile:'',
      receivedId: '',
      activeName: 'otherInfo',
      payLoads: '',
      promoterName: '',
      form: {
        balance: 0,
        point: 0,
        name: '',
        birth: '',
        mobile: '',
        phone: '',
        email: '',
        gender: '0',
        areaId: 440000,
        areaName: '广东省广州市海珠区',
        address: '',
        vip: '',
        memberCategoryId: '',
        memberType: '0'
      },
      vipName: '',
      memberCategoryName: '',
      optionsForm: [
        { name: '男', value: 1 },
        { name: '女', value: 2 }
      ],
      receiverList: [],
      emptyBarrelList: [],
      emptyBarrelShow: false,
      depositList: [],
      pointList: [],
      waterList: [],
      waterShow: false,
      shoppingList: [],
      shoppingShow: false,
      paymentList: [],
      payments:[{
        name:'现金支付',
        paymentPluginId:'cashPayPlugin',
      },{
        name:'转账',
        paymentPluginId:'bankPayPlugin',
      }],
      paymentPluginId:'',
      paymentShow: false,
      refundList: [],
      refundShow: false,
      welfareList: [],
      couponList: [],
      matchPointForm: [],
      couponShow: false,
      cardBillList: [],
      rechargeShow: false,
      pageSize: 5,
      pageNum: 1,
      total: 0,
      paginationShow: false,
      requestList: '',
      receiverAddVisible: false,
      receiverAddShow: false,
      receiverEditVisible: false,
      receiverEditShow: false,
      emptyBarrelSearch: false,
      emptyBarrelTitle: '',
      emptyBarrelDialogVisible: false,
      emptyBarrelForm: {},
      productParams: {
        'subType': 4,
        'type': 0,
        'isList': true
      },
      transferRules: {
        mchId: [
          { required: true, message: '请选择商户名称', trigger: 'blur' }
        ]
      },
      emptyBarrelRules: {
        name: [
          { required: true, message: '请选择商品名称', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        memo: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      }
    }
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal.name, newVal.query.id, this.id, '啊')
      if (newVal.name === 'member-detail' && newVal.query.id !== this.id) {
        this.getData()
      }
    }
  },
  activated() {
    this.payLoads = new Date().getTime()
  },
  created() {
    this.getData()
  },
  methods: {
    selectBom(){

        if(this.paymentPluginId!=''){
          this.products.forEach(item=>{
            if (item.quality!=''){
              var param=new URLSearchParams()
              param.append('memberId',this.form.id)
              param.append('productId',item.id)
              param.append('quantity',item.quality)
              param.append('paymentPluginId',this.paymentPluginId)
              if (this.isType=='add'){
                add(param).then(res=>{
                  if(res.type=='success'){
                    this.$message({
                      message: '成功',
                      type: 'success'
                    });
                    this.returnVisible=false
                    this.getData()
                  }
                })
              }else if(this.isType=='return'){
                dec(param).then(res=>{
                  if(res.type=='success'){
                    this.$message({
                      message: '成功',
                      type: 'success'
                    });
                    this.returnVisible=false
                    this.getData()
                  }
                })
              }
            }
          })
        }else if(this.paymentPluginId==''){
          this.$message({
            message: '请选择收款方式',
            type: 'warning'
          });
        }
    },
    loadProduct(){
      list({
        subType: 3,
        type: 1
      }).then(res=>{
        res.data.data.forEach(item=>{
          item.quality=0
        })
        this.products=res.data.data
      })
    },
    memberReturnClick(){
      this.loadProduct()
      this.isType='return'
      this.returnVisible=true
      this.bomTile='退桶'
    },
    memberAddClick(){
        this.loadProduct()
        this.isType='add'
        this.returnVisible=true
        this.bomTile='押桶'
    },
    queryMchId(query) {
      clearTimeout(this.mchIdMark)
      this.mchIdMark = setTimeout(() => {
        sysMchList({ name: query }).then(res => {
          this.mchIdOptions = res.data.data
        }).catch(err => { console.log(err) })
      }, 500)
    },
    transferShow() {
      this.queryMchId()
      this.transferVisible = true
    },
    transferClose() {
      this.transferForm.mchId = ''
      this.transferVisible = false
    },
    transferClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.mchidClicked = true
          const params = {
            memberId: this.id,
            mchId: this.transferForm.mchId
          }
          transfer(params).then(res => {
            console.log(res, '过户')
            this.$message({ type: 'success', message: '已成功过户' })
            this.mchidClicked = false
            this.transferClose()
          }).catch(() => {
            this.mchidClicked = false
            this.$message({ type: 'error', message: '过户失败' })
          })
        }
      })
    },
    getData() {
      this.activeName = 'otherInfo'
      this.id = this.$route.query.id
      find(this.id).then(response => {
        console.log(response)
        if (response.type === 'success') {
          this.form.id = this.$route.query.id
          this.shopName=response.data.shopName
          this.form = response.data.member
          this.promoterName = response.data.promoterName
          this.initTabData()
        } else {
          this.$message({ message: response.content, offset: 120, center: true })
        }
      }).catch(err => { console.log(err) })
    },
    initTabData() {
      this.initReceiver()
      this.initPoint()
      MenuTree().then(res => {
        this.recursionPower(res, 'emptyBarrel-list', 'initEmptyBarrel', 'emptyBarrelShow') // 空桶管理
        this.recursionPower(res, 'emptyBarrel-list', 'initDeposit', 'emptyBarrelShow') // 空桶押金
        this.recursionPower(res, 'waterTicket-list', 'initWater', 'waterShow') // 水票
        this.recursionPower(res, 'payment.query', 'initPayment', 'paymentShow') // 付款记录
        this.recursionPower(res, 'refund.query', 'initRefund', 'refundShow') // 退款记录
        this.recursionPower(res, 'order.query', 'initShopping', 'shoppingShow') // 消费记录
        this.recursionPower(res, 'coupon.query', 'initCoupon', 'couponShow') // 优惠券
        this.recursionPower(res, 'companyEmployee.recharge', 'initcard', 'rechargeShow') // 福利卡
        this.recursionPower(res, 'companyEmployee.recharge', 'initwelfare', 'rechargeShow') // 会员卡
      })
    },
    recursionPower(dataSource, rowerName, FnName, showName) {
      // dataSource: 数据源
      // rowerName: 权限名
      // FnName: 需要执行的方法名
      // showName: 控制显示的开关名
      const { data } = dataSource
      const clearChildrens = paramsData => {
        try {
          paramsData.forEach(item => {
            if (item.permission === rowerName) {
              this[FnName]()
              this[showName] = true
              throw Error(`有${rowerName}权限`)
            } else {
              clearChildrens(item.childrens)
            }
          })
        } catch (e) { console.log(e.message) }
      }
      /* const clearChildrens = paramsData => {
        for (let i = 0; i < paramsData.length; i++) {
          if (paramsData[i].permission === rowerName) {
            this[FnName]()
            this[showName] = true
            return
          } else {
            clearChildrens(paramsData[i].childrens)
          }
        }
      } */
      clearChildrens(data)
    },
    initReceiver() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      receiver(params).then(res => {
        // console.log(res)
        this.receiverList = res.data.data
        this.total = res.data.total
      }).catch(err => { console.log(err) })
    },
    initPoint() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      point(params).then(res => {
        // console.log(res, '金币')
        this.pointList = res.data.data
        this.total = res.data.total
      }).catch(err => { console.log(err) })
    },
    initWater() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        subType: 2
      }
      virtualStock(params).then(res => {
        // console.log(res.data.data, '水票')
        this.total = res.data.total
        res.data.data.forEach(item => {
          item.stock = parseInt(item.stock)
          item.price = parseFloat(item.price).toFixed(2)
        })
        this.waterList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initEmptyBarrel() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        subType: 3
      }
      emptyBarrel(params).then(res => {
        // console.log(res.data.data, '空桶管理')
        this.total = res.data.total
        this.emptyBarrelList = res.data.data
        this.initSummary()
      }).catch(err => { console.log(err) })
    },
    initSummary() {
      summary({ memberId: this.id }).then(res => {
        console.log(res, 'res...')
        /* this.emptyBarrelNum = !!res.data.emptyBarrel ? res.data.emptyBarrel : '0'
        this.price = !!res.data.price ? res.data.price.toFixed(2) : '0'
        this.stock = !!res.data.stock ? res.data.stock : '0' */
        this.emptyBarrelNum = !utils.isNull(res.data.emptyBarrel) ? Number(res.data.emptyBarrel) : '0'
        this.price = !utils.isNull(res.data.price) ? Number(res.data.price).toFixed(2) : '0'
        this.stock = !utils.isNull(res.data.stock) ? Number(res.data.stock) : '0'
      }).catch(err => {
        console.log(err)
      })
    },
    initDeposit() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        subType: 3
      }
      virtualStock(params).then(res => {
        // console.log(res, '空桶押金')
        this.total = res.data.total
        res.data.data.forEach(item => {
          item.stock = parseInt(item.stock)
          item.price = parseFloat(item.price)
          this.allStock += item.stock
          this.allPrice += item.price
        })
        this.depositList = res.data.data
        this.initSummary()
      }).catch(err => { console.log(err) })
    },
    initShopping() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      shopping(params).then(res => {
        // console.log(res, '账单')
        this.total = res.data.total
        this.shoppingList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initPayment() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      payment(params).then(res => {
        // console.log(res, 'initPayment')
        this.total = res.data.total
        this.paymentList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initRefund() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      refund(params).then(res => {
        this.total = res.data.total
        this.refundList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initcard() {
      var _this = this
      const params = {
        memberId: this.id,
        cardType: 0
      }
      card(params).then(res => {
        console.log(res)
        if (res.data.data.length > 0) {
          _this.initcardBill(res.data.data[0].id)
        }
      }).catch(err => { console.log(err) })
    },
    initcardBill(id) {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        cardId: id
      }
      cardbill(params).then(res => {
        console.log(res)
        this.total = res.data.total
        this.cardBillList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initwelfare() {
      var _this = this
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        cardType: 1
      }
      card(params).then(res => {
        console.log(res)
        this.total = res.data.total
        this.welfareList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initCoupon() {
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      coupon(params).then(res => {
        // console.log(res, '优惠券')
        this.total = res.data.total
        this.couponList = res.data.data
      }).catch(err => { console.log(err) })
    },
    initMatchPoint(){
      const params = {
        memberId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      matchPointList(params).then(res => {
        console.log(res)
        this.total = res.data.total
        this.matchPointForm = res.data.data
      }).catch(err => { console.log(err) })
    },

    receiverAddClose() {
      this.receiverAddVisible = false
    },
    receivedAddReceiver(data) {
      this.initReceiver()
      this.receiverAddShow = false
      this.receiverAddVisible = false
    },
    receiverEditClose() {
      this.receiverEditVisible = false
    },
    receivedEditReceiver(data) {
      this.initReceiver()
      this.receiverEditShow = false
      this.receiverEditVisible = false
    },
    queryProduct(value) {
      if (!utils.isNull(value)) {
        this.emptyBarrelForm.adminFreight = 0
        this.emptyBarrelForm.cost = 0
        this.emptyBarrelForm.name = value.name
        this.emptyBarrelForm.productId = value.id
        this.emptyBarrelForm.shippingFreight = 0
        this.emptyBarrelForm.sn = value.sn
        this.emptyBarrelForm.spec = value.spec1
        this.emptyBarrelForm.thumbnail = value.thumbnail
        this.emptyBarrelForm.unit = value.unit
      } else {
        this.emptyBarrelForm.adminFreight = null
        this.emptyBarrelForm.cost = null
        this.emptyBarrelForm.name = null
        this.emptyBarrelForm.productId = null
        this.emptyBarrelForm.shippingFreight = null
        this.emptyBarrelForm.sn = null
        this.emptyBarrelForm.spec = null
        this.emptyBarrelForm.thumbnail = null
        this.emptyBarrelForm.unit = null
      }
    },
    outDepositShow() {
      this.emptyBarrelSearch = true
      this.emptyBarrelTitle = '出桶'
      this.emptyBarrelForm.emptyType = 1
      this.emptyBarrelDialogVisible = true
    },
    returnDepositShow() {
      this.emptyBarrelSearch = true
      this.emptyBarrelTitle = '回桶'
      this.emptyBarrelForm.emptyType = 2
      this.emptyBarrelDialogVisible = true
    },
    emptyBarrelClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.emptyBarrelForm.memberId = this.id
          const obj = {}
          for (const key in this.emptyBarrelForm) {
            obj[key] = this.emptyBarrelForm[key]
          }
          const tempFrom = [obj]
          if (this.emptyBarrelTitle === '出桶') {
            tempFrom[0].quantity = -Math.abs(tempFrom[0].quantity) // 全部转成负数避免用户输入错误
            decEmptyBarrel(tempFrom).then(res => {
              this.initEmptyBarrel()
            }).catch(err => { console.log(err) })
          } else if (this.emptyBarrelTitle === '回桶') {
            tempFrom[0].quantity = Math.abs(tempFrom[0].quantity)
            addEmptyBarrel(tempFrom).then(res => {
              this.initEmptyBarrel()
            }).catch(err => { console.log(err) })
          }
          this.emptyBarrelDialogVisible = false
        }
      })
    },
    depositClose() {
      this.emptyBarrelSearch = false
      this.emptyBarrelForm = {}
    },
    toOrder(row) {
      this.$router.push({
        path: '/order/view?id=' + row.id
      })
    },
    toPayment(row) {
      this.$router.push({
        path: '/payment/view?id=' + row.id
      })
    },
    toRefund(row) {
      this.$router.push({
        path: '/refund/view', query: { id: row.id }
      })
    },
    toWelfareClick(row) {
      this.$router.push({
        path: '/member/welfareBill?id=' + row.id + '&memberId=' + this.id
      })
    },
    showAddReceiver() {
      this.receiverAddShow = true
      this.receiverAddVisible = true
    },
    showEditReceiver(row) {
      this.receiverEditShow = true
      this.receiverEditVisible = true
      this.receivedId = row.id
    },
    delAddress(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        receiverDel(row.id).then(response => {
          console.log(response)
          receiver({ memberId: this.id }).then(res => {
            this.receiverList = res.data.data
          }).catch(err => { console.log(err) })
          this.$message({ message: response.content, offset: 120, center: true })
        }).catch(err => { console.log(err) })
      }).catch(err => { console.log(err) })
    },
    handleSizeChange(value) {
      this.pageSize = value
      this[this.requestList]()
    },
    handleCurrentChange(value) {
      this.pageNum = value
      this[this.requestList]()
    },
    tabsClick(tab, event) {
      // console.log(tab, event)
      this.pageSize = 5
      this.pageNum = 1
      this.total = 0
      this.paginationShow = true
      if (tab.name === 'otherInfo') {
        this.paginationShow = false
      } else if (tab.name === 'receiver') {
        this.initReceiver()
        this.requestList = 'initReceiver'
      } else if (tab.name === 'point') {
        this.initPoint()
        this.requestList = 'initPoint'
      } else if (tab.name === 'water') {
        this.initWater()
        this.requestList = 'initWater'
      } else if (tab.name === 'emptyBarrel') {
        this.initEmptyBarrel()
        this.requestList = 'initEmptyBarrel'
      } else if (tab.name === 'deposit') {
        this.initDeposit()
        this.requestList = 'initDeposit'
      } else if (tab.name === 'shopping') {
        this.initShopping()
        this.requestList = 'initShopping'
      } else if (tab.name === 'coupon') {
        this.initCoupon()
        this.requestList = 'initCoupon'
      } else if (tab.name === 'payment') {
        this.initPayment()
        this.requestList = 'initPayment'
      } else if (tab.name === 'refunds') {
        this.initRefund()
        this.requestList = 'initRefund'
      } else if (tab.name === 'memberCard') {
        this.initcard()
        this.requestList = 'initcard'
      } else if (tab.name === 'welfare') {
        this.initwelfare()
        this.requestList = 'initwelfare'
      }else if (tab.name == 'matchPoint'){
        this.initMatchPoint()
        this.requestList = 'initMatchPoint'
      }
    }
  }
}
</script>
